<html>
<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>


<div class="container">

  <h3>Register user</h3>
  <form class="card" name="user" enctype="multipart/form-data">
    <div class="card-container">
      <div class="row">
        <div class="col s12">
          <div class="row">
            <div class="input-field col s6">
              <input id="name" name="name" type="text" class="validate" required>
              <label for="name">Name</label>
            </div>
          </div>

          <div class="row">
            <div class="input-field col s6">
              <input id="email" name="email" type="email" class="validate" required>
              <label for="email">Email</label>
            </div>
          </div>

          <div class="row">
            <div class="input-field col s6">
              <input id="password" name="password" type="password" class="validate" required>
              <label for="password">Password</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-action">
      <button type="submit" class="waves-effect waves-light btn">Send</button>
    </div>
  </form>

</div>


<script src="<%- socketScript %>"></script>
<script>
  const socket = io(window.location.origin + '/room');
  socket.on('connect', () => {
    console.log('Connected to', window.location.origin);
  });
  socket.on('event', function (data) {
  });
  socket.on('disconnect', () => {
    console.log('Disconnected');
  });

  const form = document.querySelector('form');

  form.addEventListener('submit', (evt) => {
    evt.stopPropagation();
    evt.preventDefault();

    const formData = new FormData(form);
    const user = Array.from(formData.keys()).reduce((acc, key) => {
      acc[key] = formData.get(key);
      return acc;
    }, {});

    socket.emit('eventUser', user);
    return false;
  });

</script>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</body>
</html>